<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 

	<!-- 表格面板1 -->
	<div class="layui-col-md12">
	  <div class="layui-card">
	    <div class="layui-card-header">
			营业额表
		</div>
	    <div class="layui-card-body layuiadmin-card-list" >
		   <!-- 表格容器 -->
	      <input type="hidden" id="years" value="" >
	      <div id="main" style="width: 780px;height:380px;"></div>
	    </div>
	  </div>
	</div>

          
<script src="layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  
  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');
  
  //监听提交
  form.on('submit(demo1)', function(data){
    alert("提交成功");
		var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);	
  });
 
});
</script>

<!-- EChart的JS -->
<script src="layui/jquery.min.js"></script>
<script src="EChart/echarts.min.js"></script>
<script>
$(function(){
	getParam();
	get();
});
function getParam() {
  var url = location.search; //获取url中"?"符后的字串
  if (url.indexOf("?") != -1) {
   var str = url.substr(1);
   strs = str.split("&");
   var year = decodeURIComponent(strs[0].replace("year=", ""));
   $("#years").val(year);

  }
 }
</script>
<script type="text/javascript">
	function get(){
	// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var years=$("#years").val();
    //myChart.showLoading();
    
    myChart.showLoading();
    var option = {
    	    title : {
    	        text: '年销售额对比图',
    	        subtext: ''
    	    },
    	    tooltip : {
    	        trigger: 'axis'
    	    },
    	    legend: {
    	        data:[years,'2019年']
    	    },
    	    toolbox: {
    	        show : true,
    	        feature : {
    	            dataView : {show: false, readOnly: false},
    	            magicType : {show: true, type: ['bar', 'line']},
    	            restore : {show: true},
    	            saveAsImage : {show: false}
    	        }
    	    },
    	    calculable : true,
    	    xAxis : [
    	        {
    	            type : 'category',
    	            //data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    	            data : []
    	        }
    	    ],
    	    yAxis : [
    	        {
    	            type : 'value'
    	        }
    	    ],
    	    series : [
    	        {
    	            name:'2019年',
    	            type:'line',
    	            //data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
    	            data:[],
    	            markPoint : {
    	                data : [
    	                    {type : 'max', name: '最大值'},
    	                    {type : 'min', name: '最小值'}
    	                ]
    	            },
    	            markLine : {
    	                data : [
    	                    {type : 'average', name: '平均值'}
    	                ]
    	            }
    	        }
    	        ,{
    	            name:years,
    	            type:'line',
    	            //data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
    	            data:[],
    	            markPoint : {
    	                data : [
    	                    {type : 'max', name: '最大值'},
    	                    {type : 'min', name: '最小值'}
    	                ]
    	            },
    	            markLine : {
    	                data : [
    	                    {type : 'average', name: '平均值'}
    	                ]
    	            }
    	        }
    	        
    			
    	    ]
    	};

    
    var names1=[];    //类别数组（实际用来盛放X轴坐标值）
    var value1=[];    //销量数组（实际用来盛放Y坐标值）
    var names2=[];    //类别数组（实际用来盛放X轴坐标值）
    var value2=[];    //销量数组（实际用来盛放Y坐标值）
    $.ajax({
		url: "/data/searchTable",
		type:"post",
		async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
		data:{odata:years},
		success:function(result){
			
		   for(var i=0;i<result.list2.length;i++){  //list2 为传入年份  list1为2019年
			   	if(result.list2[i].name.indexOf("01") != -1){
			   	names2.push("一月");
			   	}
			   	else if(result.list2[i].name.indexOf("02") != -1){
			   	names2.push("二月");
			   	}
			   	else if(result.list2[i].name.indexOf("03") != -1){
			   	names2.push("三月");
			   	}
			   	else if(result.list2[i].name.indexOf("04") != -1){
			   	names2.push("四月");
			   	}
			   	else if(result.list2[i].name.indexOf("05") != -1){
			   	names2.push("五月");
			   	}
			   	else if(result.list2[i].name.indexOf("06") != -1){
			   	names2.push("六月");
			   	}
			   	else if(result.list2[i].name.indexOf("07") != -1){
			   	names2.push("七月");
			   	}
			   	else if(result.list2[i].name.indexOf("08") != -1){
			   	names2.push("八月");
			   	}
			   	else if(result.list2[i].name.indexOf("09") != -1){
			   	names2.push("九月");
			   	}
			   	else if(result.list2[i].name.indexOf("10") != -1){
			   	names2.push("十月");
			   	}
			   	else if(result.list2[i].name.indexOf("11") != -1){
			   	names2.push("十一月");
			   	}
			   	else if(result.list2[i].name.indexOf("12") != -1){
			   	names2.push("十二月");
			   	}
           }
		   for(var i=0;i<result.list1.length;i++){
			   	if(result.list1[i].name.indexOf("01") != -1){
			   	names1.push("一月");
			   	}
			   	else if(result.list1[i].name.indexOf("02") != -1){
			   	names1.push("二月");
			   	}
			   	else if(result.list1[i].name.indexOf("03") != -1){
			   	names1.push("三月");
			   	}
			   	else if(result.list1[i].name.indexOf("04") != -1){
			   	names1.push("四月");
			   	}
			   	else if(result.list1[i].name.indexOf("05") != -1){
			   	names1.push("五月");
			   	}
			   	else if(result.list1[i].name.indexOf("06") != -1){
			   	names1.push("六月");
			   	}
			   	else if(result.list1[i].name.indexOf("07") != -1){
			   	names1.push("七月");
			   	}
			   	else if(result.list1[i].name.indexOf("08") != -1){
			   	names1.push("八月");
			   	}
			   	else if(result.list1[i].name.indexOf("09") != -1){
			   	names1.push("九月");
			   	}
			   	else if(result.list1[i].name.indexOf("10") != -1){
			   	names1.push("十月");
			   	}
			   	else if(result.list1[i].name.indexOf("11") != -1){
			   	names1.push("十一月");
			   	}
			   	else if(result.list1[i].name.indexOf("12") != -1){
			   	names1.push("十二月");
			   	}
               //names.push(result[i].name);    //挨个取出类别并填入类别数组
          }
		   //alert(names);
		   for(var i=0;i<result.list2.length;i++){       
			   value2.push(result.list2[i].value);    //挨个取出类别并填入类别数组
          }
		   for(var i=0;i<result.list1.length;i++){       
			   value1.push(result.list1[i].value);    //挨个取出类别并填入类别数组
          }
		  //alert(value);
		  myChart.hideLoading(); 
          myChart.setOption({
        	  xAxis: {
                  data: names1
              },
              series: [{
                  // 根据名字对应到相应的系列
                  name: '2019年',
                  data: value1
              }
              ,{
            	// 根据名字对应到相应的系列
                  name: years,
                  data: value2 
              }]
        		
        	})       		
		}
	});
	
	
	// 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

	}
	
</script>

</body>
</html>
